<template>
  <div class="setting">
    <div class="set-content">
      <el-row class="set-tab">
        <el-col class="set-tab-btns" :span="22">
          <el-button class="set-tab-item"
            :class="tabType=='SHARE'?'is-tab-active':''"
            @click.stop="click2Tab('SHARE')">分享设置</el-button>
          <!-- <el-button class="set-tab-item"
            :class="tabType=='BGM'?'is-tab-active':''"
            @click.stop="click2Tab('BGM')">背景音乐</el-button> -->
          <el-button class="set-tab-item"
            :class="tabType=='MORE'?'is-tab-active':''"
            @click.stop="click2Tab('MORE')">更多功能</el-button>
        </el-col>

        <el-col class="set-tab-close" :span="2">
          <el-icon  @click.stop="click2Close"><close-bold /></el-icon>
        </el-col>
      </el-row>

      <div class="set-box">
        <setting-share v-if="tabType=='SHARE'"></setting-share>
        <!-- <setting-bgm v-if="tabType=='BGM'"></setting-bgm> -->
        <setting-more v-if="tabType=='MORE'"></setting-more>
      </div>
    </div>
  </div>
</template>

<script>
  import SettingMore from '@/views/child/setting/setting-more.vue'
  import SettingShare from '@/views/child/setting/setting-share.vue'
  import { mapState, mapActions } from 'vuex'
  import { ref } from 'vue'
  export default {
    setup () {
      return {
        tabType: ref('SHARE'),  // SHARE BGM MORE
      }
    },
    components: {
      // SettingBgm,
      SettingMore,
      SettingShare,
    },
    computed: {
      ...mapState({
        attrs: state =>  _.cloneDeep(state.components.attrs),
        controls: state => state.wbComponents.controls
      }),
    },
    methods: {
      ...mapActions({
        savePageDatas: "components/savePageDatas",
      }),
      click2Close() {
        this.savePageDatas();
        this.$emit('close', false);
        this.$notify({
          title: '提示',
          message: '保存成功',
          type: 'success'
        });
      },
      click2Tab(type) {
        this.tabType = type;
      },
    },
  }
</script>

<style lang="scss">
  .setting{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(67, 71, 92, .8);
    z-index: 1002;
  }

  .set-content{
    position: relative;
    width: 910px;
    min-height: 0;
    background: #fff;
    border-radius: 2px;
    overflow: hidden;
  }

  .set-tab{
    position: relative;
    width: 100%;
    height: 53px;
    background: #43475C;
    border-radius: 2px 2px 0px 0px;
    overflow: hidden;

    .set-tab-btns{
      position: relative;
      height: 100%;

      .set-tab-item{
        width: 121px;
        height: 100%;
        font-size: 16px;
        color: #fff;
        background-color: transparent;
        background-image: none;
        margin: 0;
        border: none;
        border-radius: 0;
        transition: background-color .1s ease-in-out;
      }
    }

    .set-tab-close{
      position: relative;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      i{
        font-size: 25px;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .is-tab-active{
    background-color: #127BFF !important;
  }

  .set-box{
    position: relative;
    width: 100%;
    // min-height: 520px;
  }
</style>
